<template>
<div>
  <div class="zan-cell zan-field">
    <div class="zan-cell__hd zan-field__title">昵称</div>
    <div class="zan-field__input zan-cell__bd"><input placeholder="请输入昵称" v-model="form.name"/></div>
    </div>

    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">手机号</div>
      <div class="zan-field__input zan-cell__bd">
        <div class='container'>{{form.mobile}}</div><button type="primary" class='btnMobile' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取</button>
      </div>
    </div>

    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">性别</div>
      <div class="zan-field__input zan-cell__bd">
        <radio-group class="radio-group" v-model="form.sex" @change="changeSex">
          <radio value="male" checked>男&nbsp;&nbsp;</radio>
          <radio value="female">女</radio>
        </radio-group>
      </div>
    </div>

    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">出生日期</div>
      <div class="zan-field__input zan-cell__bd">
        <picker mode="date" :value="form.birthday" :start="startDate" end="endDate" @change="bindDateChangeStart">
          <div class="index_picker">
            <div class="">{{ form.birthday }}</div>
          </div>
        </picker>
      </div>
    </div>

    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">地址</div>
      <div class="zan-field__input zan-cell__bd">
        <div @click="chooseAddress">{{form.address}}</div>
      </div>
    </div>

    <button class="bottom1" type="primary" @click="submit">激活</button>
    <!-- <button  class='bottom' type='primary' @click="btn1">获取地址</button> -->
  </div>
</template>

<script>
import {
  showErrorMsg
} from '@/utils/showToast'
import {
  mapState,
  mapActions,
  mapGetters
} from 'vuex'
import api from '@/utils/api'

export default {
  data() {
    return {
      startDate: '1900-01-01',
      endDate: '',
      form: {
        birthday: "1990-01-01",
        sex: "male",
        address: "请选择地址",
        mobile: "",
      },
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'login_info',
      'wechat_callback'
    ])
  },
  onLoad(options) {
    console.log('onLoad')
    if (options && options.card_id) {
      // 有微信回调数据则保存
      this.$store.dispatch("setWechatCallback", options)
    }
  },
  beforeMount() {
    console.log('beforeMount')
    // 微信回调数据
    if (!this.wechat_callback) {
      this.showToask('微信回调数据为空')
      return
    }
    this.form.card_id = this.wechat_callback.card_id
    this.form.encrypt_code = decodeURIComponent(this.wechat_callback.encrypt_code)
    this.form.open_id = this.wechat_callback.openid

    if (!this.login_info || !this.login_info.session_key) {
      let url = 'get_user_info?callback_url=wechat_card_activate'
      wx.redirectTo({
        url: url
      })
      return
    }
    if (!this.user || !this.user.open_id) {
      let url = 'get_user_info?callback_url=wechat_card_activate'
      wx.redirectTo({
        url: url
      })
      return
    }
    this.endDate = new Date()
    this.form.name = this.user.name
    this.form.mini_open_id = this.user.open_id
    this.form.brand_id = this.user.brand_id
  },

  methods: {
    bindDateChangeStart(e) {
      console.log(e)
      this.form.birthday = e.target.value
    },
    showToask(title) {
      wx.showToast({
        title: title,
        icon: 'none'
      })
    },
    submit() {
      console.log(this.form)
      let self = this
      if (!this.form.name) {
        this.showToask('请输入姓名')
        return
      }
      if (!this.form.mobile) {
        this.showToask('请获取手机号')
        return
      }
      if (!this.form.sex) {
        this.showToask('请输入性别')
        return
      }
      if (!this.form.birthday) {
        this.showToask('请选择出生日期')
        return
      }
      if (this.form.address == '请选择地址') {
        this.showToask(this.form.address)
        return
      }

      api.wechatCardActivate(self.form).then(res => {
        console.log('wechatCardActivate', res)
        // console.log(res)
        if (res.code === 0) {
          self.showToask("激活成功")
          self.$store.dispatch("setUser", res.data)
          wx.navigateBack({
                delta: 0
          })
        } else {
          self.showToask("激活失败")
        }
      })
      // let url = 'http://localhost:4000/app_api/wechat_card/activate'
      // wx.request({
      //   url: url,
      //   method: "POST",
      //   data: this.form,
      //   success(res) {
      //     console.log(res.data.data)
      //     if (res.data.code === 0) {
      //       self.showToask("激活成功")
      //       // console.log('success', 1)
      //       self.$store.dispatch("setUser", res.data.data)
      //       // console.log('success', 2)
      //     } else {
      //       self.showToask("激活失败")
      //     }
      //   },
      //   fail(res) {
      //     console.log(res)
      //     self.showToask("激活失败")
      //   }
      // })
    },
    chooseAddress() {
      let self = this
      wx.chooseAddress({
        success(res) {
          self.form.address = res.provinceName + "-" + res.cityName + "-" + res.countyName + "-" + res.detailInfo
          console.log('success', res)
        },
        fail: function(res) {
          console.log('fail', res)
        }
      })
    },
    changeSex(e) {
      this.form.sex = e.target.value
    },
    getPhoneNumber(e) {
      console.log(e)
      if (e.target.errMsg == "getPhoneNumber:fail user deny") {
        this.showToask('请点击允许')
        return
      }
      // this.form.phone="123"

      let self = this
      api.wechatDecryptPhoneData({
        iv: e.target.iv,
        session_key: self.login_info.session_key,
        encrypted_data: e.target.encryptedData
      }).then(result => {
        if (result.code === 0) {
          this.form.mobile = result.data.phoneNumber
        }
      })
    }
  }
}
</script>

<style>
.btnMobile {
  /* width:80px;
   height:60px; */
  float: right;
  text-align: center;
  line-height: 35px;
}

.container {
  /* border: 2rpx black solid; */
  /* width: 00rpx; */
  /* height: 90rpx; */
  text-align: center;
  line-height: 35px;
  float: left;
}

.btn1 {
  background-color: transparent;
  border-style: none;
  outline: none;
  font-size: 10px
}

.bottom1 {
  border-radius: 10 rpx;
  margin-left: 10px;
  margin-right: 10px;
}

.grids {
  border-left: 1px solid #d9d9d9;
  overflow: hidden
}

.grids-item {
  position: relative;
  float: left;
  padding: 10px;
  width: 33.33333333%;
  box-sizing: border-box;
  border-right: 1px solid #d9d9d9;
}

.zan-icon {
  display: block;
  width: 28px;
  height: 28px;
  font-size: 24px;
  margin: 5px auto
}

.grid_label {
  margin-top: 5px;
  display: block;
  text-align: center;
  color: #000;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.weui-cells {
  position: relative;
  margin-top: 1.2em;
  background-color: #fff;
  line-height: 1.4;
  font-size: 17px
}

.weui-cells_after-title {
  margin-top: 0
}

.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: 1px solid #F0F0F0;
}

.weui-check__label:active {
  background-color: #ececec
}

.weui-check {
  position: absolute;
  left: -9999px
}

.weui-cell__bd {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1
}

.weui-cell__ft {
  text-align: right;
  color: #999
}

.weui-cell__ft_in-radio {
  padding-left: .35em
}

.btn {
  height: 40px;
  line-height: 40px;
  width: 80%;
  color: white;
  text-align: center;
  background: black;
  border-radius: 50px;
  margin: 5px auto;
}
</style>
